<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <a-form :form="form" slot="detail">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="此废物名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['wasteName']" placeholder="请输入此废物名称"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="医院提交废物重量" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input-number v-decorator="['wasteOriginalValue']" placeholder="请输入医院提交废物重量"
                                            style="width: 100%"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="客户编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['customerNumber']" placeholder="请输入客户编号"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="提交人id" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['submitId']" placeholder="请输入提交人id"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="收运人id" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['recyclePersonId']" placeholder="请输入收运人id"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="收运状态（1-已提交（待收运），2-已收运）" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['recycleBagStatus']"
                                     placeholder="请输入收运状态（1-已提交（待收运），2-已收运）"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="收运编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['recycleNumber']" placeholder="请输入收运编号"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="收运袋编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['recycleBagCode']" placeholder="请输入收运袋编码"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="收运请求提交用户电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['submitUserMobile']" placeholder="请输入收运请求提交用户电话"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="机构详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['customerAddress']" placeholder="请输入机构详细地址"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="废物父类型id" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['wasteParentId']" placeholder="请输入废物父类型id"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="废物类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['wasteType']" placeholder="请输入废物类型"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="收运时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date placeholder="请选择收运时间" v-decorator="['recycleTime']" :trigger-change="true"
                                    style="width: 100%"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="收运需求提交人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['submitUserName']" placeholder="请输入收运需求提交人姓名"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="提交人类型（1-医院，2-收运员）" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['submitType']" placeholder="请输入提交人类型（1-医院，2-收运员）"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="收运人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['recyclePersonName']" placeholder="请输入收运人姓名"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="废物父类型名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['wasteParentName']" placeholder="请输入废物父类型名称"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="收运人电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['recyclePersonPhone']" placeholder="请输入收运人电话"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="部门id（大医院科室id）" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['departmentId']" placeholder="请输入部门id（大医院科室id）"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="机构名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['customerName']" placeholder="请输入机构名称"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
                        <a-button @click="submitForm">提 交</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </j-form-container>
    </a-spin>
</template>

<script>

    import { httpAction, getAction } from '@/api/manage'
    import pick from 'lodash.pick'

    export default {
        components: {},
        props: {
            //流程表单data
            formData: {
                type: Object,
                default: () => {
                },
                required: false
            },
            //表单模式：true流程表单 false普通表单
            formBpm: {
                type: Boolean,
                default: false,
                required: false
            },
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data() {
            return {
                form: this.$form.createForm(this),
                model: {},
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 }
                },
                confirmLoading: false,
                validatorRules: {},
                url: {
                    add: '/hc/hcRecycleBagcode/add',
                    edit: '/hc/hcRecycleBagcode/edit',
                    queryById: '/hc/hcRecycleBagcode/queryById'
                }
            }
        },
        computed: {
            formDisabled() {
                if (this.formBpm === true) {
                    if (this.formData.disabled === false) {
                        return false
                    }
                    return true
                }
                return this.disabled
            },
            showFlowSubmitButton() {
                if (this.formBpm === true) {
                    if (this.formData.disabled === false) {
                        return true
                    }
                }
                return false
            }
        },
        created() {
            //如果是流程中表单，则需要加载流程表单data
            this.showFlowData()
        },
        methods: {
            add() {
                this.edit({})
            },
            edit(record) {
                this.form.resetFields()
                this.model = Object.assign({}, record)
                this.visible = true
                this.$nextTick(() => {
                    this.form.setFieldsValue(pick(this.model, 'wasteName', 'wasteOriginalValue', 'customerNumber', 'submitId', 'recyclePersonId', 'recycleBagStatus', 'recycleNumber', 'recycleBagCode', 'submitUserMobile', 'customerAddress', 'wasteParentId', 'wasteType', 'recycleTime', 'submitUserName', 'submitType', 'recyclePersonName', 'wasteParentName', 'recyclePersonPhone', 'departmentId', 'wastePresentValue', 'priceUnit', 'customerName', 'city', 'cityCode', 'provinceCode', 'province', 'area', 'areaCode', 'delFlag', 'companysId'))
                })
            },
            //渲染流程表单数据
            showFlowData() {
                if (this.formBpm === true) {
                    let params = { id: this.formData.dataId }
                    getAction(this.url.queryById, params).then((res) => {
                        if (res.success) {
                            this.edit(res.result)
                        }
                    })
                }
            },
            submitForm() {
                const that = this
                // 触发表单验证
                this.form.validateFields((err, values) => {
                    if (!err) {
                        that.confirmLoading = true
                        let httpurl = ''
                        let method = ''
                        if (!this.model.id) {
                            httpurl += this.url.add
                            method = 'post'
                        } else {
                            httpurl += this.url.edit
                            method = 'put'
                        }
                        let formData = Object.assign(this.model, values)
                        console.log('表单提交数据', formData)
                        httpAction(httpurl, formData, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            },
            popupCallback(row) {
                this.form.setFieldsValue(pick(row, 'wasteName', 'wasteOriginalValue', 'customerNumber', 'submitId', 'recyclePersonId', 'recycleBagStatus', 'recycleNumber', 'recycleBagCode', 'submitUserMobile', 'customerAddress', 'wasteParentId', 'wasteType', 'recycleTime', 'submitUserName', 'submitType', 'recyclePersonName', 'wasteParentName', 'recyclePersonPhone', 'departmentId', 'wastePresentValue', 'priceUnit', 'customerName', 'city', 'cityCode', 'provinceCode', 'province', 'area', 'areaCode', 'delFlag', 'companysId'))
            }
        }
    }
</script>
